Hranice chýb v TypeScripte: Typové vzory na spracovanie chýb pre robustné aplikácie

Vo svete softvérového vývoja sú neočakávané chyby nevyhnutné. Od sieťových porúch po neočakávané dátové formáty, aplikácie musia byť pripravené tieto situácie zvládnuť s gráciou. TypeScript so svojím výkonným typovým systémom ponúka robustný rámec na vytváranie odolných aplikácií. Tento článok sa ponorí do konceptu hraníc chýb v TypeScripte, preskúma rôzne typové vzory spracovania chýb, osvedčené postupy a príklady z reálneho života, aby vás vybavil znalosťami na vytváranie stabilnejšieho a udržiavateľnejšieho kódu.

Pochopenie dôležitosti spracovania chýb

Efektívne spracovanie chýb je kľúčové pre pozitívnu používateľskú skúsenosť a celkové zdravie aplikácie. Keď sa chyby neošetria, môžu viesť k:

• Haváriám a nepředvídateľnému správaniu: Nezachytané výnimky môžu zastaviť vykonávanie vášho kódu, čo vedie k haváriám alebo nepředvídateľným výsledkom.
• Strata a poškodenie údajov: Chyby počas spracovania alebo ukladania údajov môžu viesť k strate alebo poškodeniu údajov, čo ovplyvňuje používateľov a integritu systému.
• Bezpečnostné zraniteľnosti: Zlé spracovanie chýb môže odhaliť citlivé informácie alebo vytvoriť príležitosti pre škodlivé útoky.
• Negatívna používateľská skúsenosť: Používatelia, ktorí sa stretnú s kryptickými chybovými hláseniami alebo zlyhaniami aplikácie, pravdepodobne zažijú frustrujúcu skúsenosť, čo povedie k strate dôvery a prijatia.
• Znížená produktivita: Vývojári trávia čas laděním a riešením neošetrených chýb, čo bráni celkovej produktivite vývoja a spomaľuje cykly vydávania.

Dobré spracovanie chýb na druhej strane poskytuje:

• Graceful Degradation: Aplikácia pokračuje vo fungovaní, aj keď špecifická časť narazí na chybu.
• Informatívna spätná väzba: Používatelia dostávajú jasné a stručné chybové hlásenia, ktoré im pomáhajú porozumieť problému a vyriešiť ho.
• Integrita údajov: Dôležité operácie sa riadia transakčným spôsobom, čím sa chránia dôležité používateľské informácie.
• Vylepšená stabilita: Aplikácia sa stáva odolnejšou voči neočakávaným udalostiam.
• Zlepšená udržiavateľnosť: Ľahšie identifikovať, diagnostikovať a opraviť problémy, keď nastanú.

Čo sú hranice chýb v TypeScripte?

Hranice chýb sú dizajnový vzor používaný na zachytávanie chýb v jazyku JavaScript v špecifickej časti stromu komponentov a na elegantné zobrazenie náhradného UI namiesto zlyhania celej aplikácie. Hoci samotný TypeScript nemá špecifickú funkciu „hranice chýb“, princípy a techniky na vytváranie takýchto hraníc sa ľahko aplikujú a zlepšujú typovou bezpečnosťou TypeScriptu.

Základnou myšlienkou je izolovať potenciálne chybový kód v rámci špecializovaného komponentu alebo modulu. Tento komponent funguje ako obal, ktorý monitoruje kód vo vnútri. Ak dôjde k chybe, komponent hranice chýb chybu „zachytí“, čím sa zabráni jej šíreniu stromom komponentov a potenciálnemu zlyhaniu aplikácie. Namiesto toho môže komponent hranice chýb vykresliť náhradné UI, zaznamenať chybu alebo sa pokúsiť zotaviť z problému.

Výhody používania hraníc chýb sú:

• Izolácia: Zabraňuje tomu, aby chyby v jednej časti vašej aplikácie ovplyvnili iné časti.
• Náhradné UI: Poskytuje používateľsky prívetivejšiu skúsenosť ako úplne nefunkčná aplikácia.
• Zaznamenávanie chýb: Uľahčuje zber informácií o chybách na účely ladenia a monitorovania.
• Zlepšená udržiavateľnosť: Zjednodušuje logiku spracovania chýb a uľahčuje aktualizáciu a údržbu kódu.

Typové vzory spracovania chýb v TypeScripte

Typový systém TypeScriptu je vysoko efektívny v kombinácii so správnymi vzormi spracovania chýb. Tu sú niektoré bežné a efektívne vzory na správu chýb vo vašich aplikáciách TypeScript:

1. Bloky Try-Catch

Základným stavebným kameňom spracovania chýb v JavaScripte a TypeScripte je blok `try-catch`. Umožňuje vám vykonať kód v bloku `try` a zachytiť všetky vyhodené výnimky. Toto je synchrónna operácia, ideálna na spracovanie chýb priamo vo funkcii.

            function fetchData(url: string): Promise<any> {
  try {
    return fetch(url).then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    });
  } catch (error) {
    console.error("An error occurred while fetching data:", error);
    // Handle the error (e.g., display an error message to the user)
    return Promise.reject(error);
  }
}
            

              
                Copy
              
            
          

V tomto príklade sa funkcia `fetchData` pokúša načítať dáta z danej adresy URL. Ak sa volanie `fetch` nezadarí (napr. chyba siete, nesprávna adresa URL) alebo ak stav odpovede nie je v poriadku, vyhodí sa chyba. Blok `catch` potom chybu spracuje. Všimnite si použitie `Promise.reject(error)` na šírenie chyby, takže volajúci kód ju môže tiež spracovať. Toto je bežné pre asynchrónne operácie.

2. Sľuby a asynchrónne spracovanie chýb

Asynchrónne operácie sú v jazyku JavaScript bežné, najmä pri práci s API, interakciami s databázou a vstupno-výstupnými operáciami so súbormi. Sľuby poskytujú výkonný mechanizmus na spracovanie chýb v týchto scenároch. Blok `try-catch` je užitočný, ale v mnohých prípadoch budete chyby spracovávať v metódach `.then()` a `.catch()` sľubu.

            function fetchData(url: string): Promise<any> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error("An error occurred while fetching data:", error);
      // Handle the error (e.g., display an error message to the user)
      return Promise.reject(error);
    });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log("Data fetched successfully:", data);
  })
  .catch(error => {
    console.error("Failed to fetch data:", error);
    // Display a user-friendly error message
  });
            

              
                Copy
              
            
          

V tomto príklade funkcia `fetchData` používa sľub na spracovanie asynchrónnej operácie `fetch`. Chyby sú zachytené v bloku `.catch()`, čo vám umožňuje ich špecificky spracovať pre asynchrónnu operáciu.

3. Chybové triedy a vlastné typy chýb

TypeScript vám umožňuje definovať vlastné chybové triedy, ktoré poskytujú štrukturovanejšie a informatívnejšie spracovanie chýb. Toto je skvelý postup na vytváranie opakovane použiteľnej a typovo bezpečnej logiky spracovania chýb. Vytvorením vlastných chybových tried môžete:

• Pridať špecifické kódy chýb: Rozlíšiť rôzne typy chýb.
• Poskytnúť kontext: Uložiť ďalšie údaje súvisiace s chybou.
• Zlepšiť čitateľnosť a udržiavateľnosť: Váš kód na spracovanie chýb bude ľahšie pochopiteľný.

            class ApiError extends Error {
  statusCode: number;
  code: string;

  constructor(message: string, statusCode: number, code: string) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.code = code;
    // Assign the prototype explicitly
    Object.setPrototypeOf(this, ApiError.prototype);
  }
}

async function getUserData(userId: number): Promise<any> {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      let errorMessage = 'Failed to fetch user data';
      if (response.status === 404) {
        errorMessage = 'User not found';
      }
      throw new ApiError(errorMessage, response.status, 'USER_NOT_FOUND');
    }
    return await response.json();
  } catch (error: any) {
    if (error instanceof ApiError) {
      console.error("API Error:", error.message, error.statusCode, error.code);
      // Handle specific API error based on the code
      if (error.code === 'USER_NOT_FOUND') {
        // Show a 'user not found' message
      }
    } else {
      console.error("An unexpected error occurred:", error);
      // Handle other errors
    }
    throw error; // Re-throw or handle the error
  }
}

getUserData(123)
  .then(userData => console.log("User data:", userData))
  .catch(error => console.error("Error retrieving user data:", error));
            

              
                Copy
              
            
          

Tento príklad definuje triedu `ApiError`, ktorá dedí z vstavanej triedy `Error`. Obsahuje vlastnosti `statusCode` a `code` na poskytnutie ďalšieho kontextu. Funkcia `getUserData` používa túto vlastnú triedu chýb, pričom zachytáva a spracováva špecifické typy chýb. Použitie operátora `instanceof` umožňuje typovo bezpečnú kontrolu a špecifické spracovanie chýb na základe typu chyby.

4. Typ `Result` (funkcionálne spracovanie chýb)

Funkcionálne programovanie často používa typ `Result` (nazývaný tiež typ `Either`) na reprezentáciu buď úspešného výsledku, alebo chyby. Tento vzor poskytuje čistý a typovo bezpečný spôsob spracovania chýb. Typ `Result` má typicky dva varianty: `Ok` (pre úspech) a `Err` (pre zlyhanie).

            
// Define a generic Result type

interface Ok<T> {
    type: 'ok';
    value: T;
}

interface Err<E> {
    type: 'err';
    error: E;
}

type Result<T, E> = Ok<T> | Err<E>

function divide(a: number, b: number): Result<number, string> {
  if (b === 0) {
    return { type: 'err', error: 'Division by zero' };
  }
  return { type: 'ok', value: a / b };
}

const result1 = divide(10, 2);
const result2 = divide(10, 0);

if (result1.type === 'ok') {
  console.log('Result:', result1.value);
} else {
  console.error('Error:', result1.error);
}

if (result2.type === 'ok') {
  console.log('Result:', result2.value);
} else {
  console.error('Error:', result2.error);
}

            

              
                Copy
              
            
          

Funkcia `divide` buď vráti `Result` typu `Ok`, ktorý obsahuje výsledok delenia, alebo `Result` typu `Err`, ktorý obsahuje chybovú správu. Tento vzor zabezpečuje, že volajúci je nútený explicitne spracovať obe scenáre úspechu aj zlyhania, čím sa zabráni nezašetreným chybám.

5. Dekorátory (pre pokročilé spracovanie chýb - zriedka sa priamo používajú na implementáciu hraníc)

Hoci nie je priamo vzorom pre hranice chýb, dekorátory sa dajú použiť na deklaratívne použitie logiky spracovania chýb na metódy. Toto môže znížiť boilerplate vo vašom kóde. Toto použitie je však menej bežné ako ostatné uvedené vzory na základnú implementáciu hraníc chýb.

            
function handleError(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = async function (...args: any[]) {
    try {
      const result = await originalMethod.apply(this, args);
      return result;
    } catch (error: any) {
      console.error(`Error in ${propertyKey}:`, error);
      // Handle the error here (e.g., log, display a default value, etc.)
      return null; // Or throw a more specific error
    }
  };

  return descriptor;
}

class MyService {
  @handleError
  async fetchData(url: string): Promise<any> {
    // Simulate an error
    if (Math.random() < 0.5) {
      throw new Error('Simulated network error');
    }
    const response = await fetch(url);
    return await response.json();
  }
}

            

              
                Copy
              
            
          

Tento príklad definuje dekorátor `@handleError`. Dekorátor obaluje pôvodnú metódu, zachytáva všetky chyby a zaznamenáva ich. To umožňuje spracovanie chýb bez priamej úpravy kódu pôvodnej metódy.

Implementácia hraníc chýb vo front-endových frameworkoch (príklad React)

Hoci základné koncepty zostávajú podobné, implementácia hraníc chýb sa mierne líši v závislosti od použitého front-endového frameworku. Zameriame sa na React, najbežnejší framework na vytváranie interaktívnych používateľských rozhraní.

Hranice chýb v Reacte

React poskytuje špecifický mechanizmus na vytváranie hraníc chýb. Hranica chýb je komponent React, ktorý zachytáva chyby JavaScriptu kdekoľvek v jeho stromovom podriadenom komponente, zaznamenáva tieto chyby a zobrazuje náhradné UI namiesto zlyhania celej aplikácie. Hranice chýb zachytávajú chyby počas vykresľovania, životných cyklov metód a konštruktorov všetkých svojich podriadených komponentov.

Kľúčové metódy na vytvorenie hranice chýb v Reacte:

• `static getDerivedStateFromError(error)`: Táto statická metóda sa volá po tom, čo descendant komponent vyhodí chybu. Prijíma chybu ako parameter a mala by vrátiť objekt na aktualizáciu stavu. Používa sa na aktualizáciu stavu, napríklad na nastavenie príznaku `error` na `true`, čím sa spustí náhradné UI.
• `componentDidCatch(error, info)`: Táto metóda sa volá po vyhodení chyby descendant komponentom. Prijíma chybu a objekt obsahujúci informácie o komponente, ktorý chybu vyhodil. Typicky sa používa na zaznamenávanie chyby. Táto metóda sa volá iba pre chyby, ktoré sa vyskytnú počas vykresľovania jeho potomkov.

            import React from 'react';

interface Props {
    children: React.ReactNode;
}

interface State {
    hasError: boolean;
    error: Error | null;
}

class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // You can also log the error to an error reporting service
    console.error('Uncaught error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div className="error-boundary">
          <h2>Something went wrong.</h2>
          <p>We're working on fixing it!</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.stack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Tento komponent `ErrorBoundary` obaluje svoje podriadené komponenty. Ak dôjde k akejkoľvek chybe vo vnútri obalených komponentov, zavolá sa metóda `getDerivedStateFromError`, aby sa aktualizoval stav, čo spôsobí, že sa komponent znovu vykreslí s náhradným UI. Metóda `componentDidCatch` sa používa na zaznamenávanie chýb. Na použitie ErrorBoundary by ste jednoducho obalili časti vašej aplikácie:

            
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <MyComponentThatMightError />
      </ErrorBoundary>
      <AnotherComponent />
    </div>
  );
}

            

              
                Copy
              
            
          

Umiestnením komponentu `ErrorBoundary` okolo potenciálne problematických komponentov izolujete tieto komponenty a poskytnete náhradné UI v prípade chýb, čím zabránite zlyhaniu celej aplikácie.

Hranice chýb v iných frameworkoch (konceptuálne)

Hoci sa detaily implementácie líšia, základné princípy hraníc chýb sa dajú aplikovať na iné front-endové frameworky ako Angular a Vue.js. Typicky by ste to dosiahli podobnými stratégiami:

• Angular: Používanie spracovania chýb komponentov, vlastných obsluhovačov chýb a interceptorov. Zvážte použitie triedy `ErrorHandler` v Angulari a obalenie potenciálne problematických komponentov logikou spracovania chýb.
• Vue.js: Používanie blokov `try...catch` v rámci komponentov alebo použitie globálnych obsluhovačov chýb zaregistrovaných prostredníctvom `Vue.config.errorHandler`. Vue tiež ponúka funkcie na spracovanie chýb na úrovni komponentov podobné hraniciam chýb Reactu.

Osvedčené postupy pre hranice chýb a spracovanie chýb

Na efektívne využitie hraníc chýb a typových vzorov spracovania chýb zvážte tieto osvedčené postupy:

• Izolujte kód náchylný na chyby: Obalte komponenty alebo časti kódu, ktoré pravdepodobne vyhodia chyby, do hraníc chýb alebo vhodných konštrukcií na spracovanie chýb.
• Poskytnite jasné chybové hlásenia: Navrhnite používateľsky prívetivé chybové hlásenia, ktoré poskytujú kontext a pokyny pre používateľa. Vyhnite sa kryptickému alebo technickému žargónu.
• Efektívne zaznamenávajte chyby: Implementujte robustný systém zaznamenávania chýb na sledovanie chýb, zhromažďovanie relevantných informácií (stack traces, používateľský kontext atď.) a uľahčenie ladenia. Používajte služby ako Sentry, Bugsnag alebo Rollbar pre produkčné prostredia.
• Implementujte náhradné UI: Poskytnite zmysluplné náhradné UI, ktoré elegantne zvládajú chyby a zabránia zlyhaniu celej aplikácie. Náhrada by mala informovať používateľa o tom, čo sa stalo, a ak je to vhodné, navrhnúť akcie, ktoré môže vykonať.
• Používajte vlastné chybové triedy: Vytvárajte vlastné chybové triedy na reprezentáciu rôznych typov chýb a pridajte ďalší kontext a informácie pre efektívnejšie spracovanie chýb.
• Zvážte rozsah hraníc chýb: Neobalujte celú aplikáciu do jednej hranice chýb, pretože by to mohlo skryť základné problémy. Namiesto toho strategicky umiestňujte hranice chýb okolo komponentov alebo častí aplikácie.
• Otestujte spracovanie chýb: Napíšte jednotkové testy a integračné testy, aby ste sa uistili, že vaša logika spracovania chýb funguje podľa očakávaní a že náhradné UI sa správne zobrazujú. Otestujte scenáre, kde môžu nastať chyby.
• Monitorujte a analyzujte chyby: Pravidelne monitorujte denníky chýb vašej aplikácie, aby ste identifikovali opakujúce sa problémy, sledovali trendy chýb a identifikovali oblasti na zlepšenie.
• Usilujte sa o validáciu údajov: Validujte údaje prijaté z externých zdrojov, aby ste predišli neočakávaným chybám spôsobeným nesprávnymi formátmi údajov.
• Opatrne spracujte sľuby a asynchrónne operácie: Uistite sa, že spracovávate chyby, ktoré sa môžu vyskytnúť v asynchrónnych operáciách, pomocou blokov `.catch()` alebo vhodných mechanizmov spracovania chýb.

Príklady z reálneho života a medzinárodné úvahy

Preskúmajme niektoré praktické príklady toho, ako je možné v reálnych scenároch aplikovať hranice chýb a typové vzory spracovania chýb, pričom zohľadníme internacionalizáciu:

Príklad: Aplikácia e-commerce (načítavanie údajov)

Predstavte si aplikáciu e-commerce, ktorá zobrazuje zoznamy produktov. Aplikácia načíta dáta o produktoch z backendového API. Hranica chýb sa používa na spracovanie potenciálnych problémov s volaniami API.

            
interface Product {
  id: number;
  name: string;
  price: number;
  currency: string;
  // ... other product details
}

class ProductList extends React.Component<{}, { products: Product[] | null; loading: boolean; error: Error | null }> {
  state = { products: null, loading: true, error: null };

  async componentDidMount() {
    try {
      const products = await this.fetchProducts();
      this.setState({ products, loading: false });
    } catch (error: any) {
      this.setState({ error, loading: false });
    }
  }

  async fetchProducts(): Promise<Product[]> {
    const response = await fetch('/api/products'); // API endpoint
    if (!response.ok) {
      throw new Error(`Failed to fetch products: ${response.status}`);
    }
    return await response.json();
  }

  render() {
    const { products, loading, error } = this.state;

    if (loading) {
      return <div>Loading products...</div>;
    }

    if (error) {
      return (
        <div className="error-message">
          <p>Sorry, we're having trouble loading the products.</p>
          <p>Please try again later.</p>
          <p>Error details: {error.message}</p> {/* Log the error message for debugging */}
        </div>
      );
    }

    return (
      <ul>
        {products && products.map(product => (
          <li key={product.id}>{product.name} - {product.price} {product.currency}</li>
        ))}
      </ul>
    );
  }
}

// Error Boundary (React Component)
class ProductListErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean, error: Error | null}> {
    constructor(props: any) {
      super(props);
      this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error: Error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true, error: error };
    }

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
      // You can also log the error to an error reporting service
      console.error('Product List Error:', error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        // Render a fallback UI (e.g., error message, retry button)
        return (
          <div className="product-list-error">
            <h2>Oops, something went wrong!</h2>
            <p>We are unable to load product information at this time.</p>
            <button onClick={() => window.location.reload()} >Retry</button>
          </div>
        );
      }
      return this.props.children;
    }
}

// Usage
function App() {
  return (
    <div>
      <ProductListErrorBoundary>
        <ProductList />
      </ProductListErrorBoundary>
    </div>
  );
}


            

              
                Copy
              
            
          

V tomto príklade:

• `ProductList` načítava údaje o produktoch. Spracúva stav načítavania, úspešné údaje o produkte a stav chyby v rámci komponentu.
• `ProductListErrorBoundary` sa používa na obalenie komponentu `ProductList` na zachytávanie chýb počas vykresľovania a volaní API.
• Ak sa žiadosť API nezadarí, `ProductListErrorBoundary` vykreslí používateľsky prívetivú chybovú správu namiesto zlyhania UI.
• Chybové hlásenie poskytuje možnosť „skúsiť znovu“, ktorá používateľovi umožňuje obnoviť.
• Pole `currency` v údajoch o produkte je možné správne zobraziť použitím internacionalizačných knižníc (napr. Intl v JavaScripte), ktoré poskytujú formátovanie meny podľa nastavení lokality používateľa.

Príklad: Medzinárodné overenie formulára

Zvážte formulár, ktorý zbiera údaje o používateľovi vrátane informácií o adrese. Správne overenie je nevyhnutné, najmä pri práci s používateľmi z rôznych krajín s rôznymi formátmi adries.

            
// Assume a simplified address interface
interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

class AddressForm extends React.Component<{}, { address: Address; errors: { [key: string]: string } }> {
  state = {
    address: {
      street: '',
      city: '',
      postalCode: '',
      country: 'US', // Default country
    },
    errors: {},
  };

  handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = event.target;
    this.setState((prevState) => ({
      address: {
        ...prevState.address,
        [name]: value,
      },
      errors: {
        ...prevState.errors,
        [name]: '', // Clear any previous errors for this field
      },
    }));
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { address } = this.state;
    const errors = this.validateAddress(address);
    if (Object.keys(errors).length > 0) {
      this.setState({ errors });
    }
    else {
      // Submit the form (e.g., to an API)
      alert('Form submitted!'); // Replace with actual submission logic
    }
  };

  validateAddress = (address: Address) => {
    const errors: { [key: string]: string } = {};

    // Validation rules based on the selected country
    if (!address.street) {
      errors.street = 'Street address is required';
    }
    if (!address.city) {
      errors.city = 'City is required';
    }

    // Example: postal code validation based on the country
    switch (address.country) {
      case 'US':
        if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid US postal code';
        }
        break;
      case 'CA':
        if (!/^[A-Za-z][0-9][A-Za-z][ ]?[0-9][A-Za-z][0-9]$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid Canadian postal code';
        }
        break;
      // Add more countries and validation rules
      default:
        if (!address.postalCode) {
          errors.postalCode = 'Postal code is required';
        }
        break;
    }

    return errors;
  };

  render() {
    const { address, errors } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="street">Street:</label>
        <input
          type="text"
          id="street"
          name="street"
          value={address.street}
          onChange={this.handleChange}
        />
        {errors.street && <div className="error">{errors.street}</div>}

        <label htmlFor="city">City:</label>
        <input
          type="text"
          id="city"
          name="city"
          value={address.city}
          onChange={this.handleChange}
        />
        {errors.city && <div className="error">{errors.city}</div>}

        <label htmlFor="postalCode">Postal Code:</label>
        <input
          type="text"
          id="postalCode"
          name="postalCode"
          value={address.postalCode}
          onChange={this.handleChange}
        />
        {errors.postalCode && <div className="error">{errors.postalCode}</div>}

        <label htmlFor="country">Country:</label>
        <select
          id="country"
          name="country"
          value={address.country}
          onChange={this.handleChange}
        >
          <option value="US">United States</option>
          <option value="CA">Canada</option>
          <!-- Add more countries -->
        </select>

        <button type="submit">Submit</button>
      </form>
    );
  }
}


            

              
                Copy
              
            
          

V tomto príklade:

• Komponent `AddressForm` spravuje dáta formulára a validačnú logiku.
• Funkcia `validateAddress` vykonáva validácie na základe vybranej krajiny.
• Používajú sa pravidlá validácie PSČ špecifické pre krajinu (zobrazené sú USA a Kanada).
• Aplikácia využíva API `Intl` na formátovanie citlivé na lokalitu. Toto by sa použilo na dynamické formátovanie čísel, dátumov a mien podľa aktuálnych nastavení lokality používateľa.
• Chybové hlásenia je možné preložiť, aby sa poskytla lepšia používateľská skúsenosť globálne.
• Tento prístup umožňuje používateľom vyplniť formulár príjemným spôsobom bez ohľadu na ich polohu.

Medzinárodné osvedčené postupy:

• Použite lokalizačnú knižnicu: Knižnice ako i18next, react-intl alebo LinguiJS poskytujú funkcie na preklad textov, formátovanie dátumov, čísel a mien na základe lokality používateľa.
• Poskytnite výber lokality: Umožnite používateľom vybrať si preferovaný jazyk a región. Môže to byť prostredníctvom rozbaľovacieho zoznamu, nastavení alebo automatickej detekcie na základe nastavení prehliadača.
• Spracujte formáty dátumov, času a čísel: Použite API `Intl` na správne formátovanie dátumov, časov, čísel a mien pre rôzne lokality.
• Zohľadnite smer textu: Navrhnite svoje UI tak, aby podporovalo smer textu zľava doprava (LTR) aj sprava doľava (RTL). Existujú knižnice, ktoré pomáhajú s podporou RTL.
• Počítajte s kultúrnymi rozdielmi: Pri navrhovaní svojho UI a chybových hlásení buďte ohľaduplní ku kultúrnym normám. Vyhnite sa používaniu jazyka alebo obrázkov, ktoré by mohli byť v určitých kultúrach urážlivé alebo nevhodné.
• Testujte v rôznych lokalitách: Dôkladne otestujte svoju aplikáciu v rôznych lokalitách, aby ste sa uistili, že preklad a formátovanie fungujú správne a že UI je riadne zobrazené.

Záver

Hranice chýb v TypeScripte a efektívne typové vzory spracovania chýb sú nevyhnutnými súčasťami vytvárania spoľahlivých a používateľsky prívetivých aplikácií. Implementáciou týchto postupov môžete predchádzať neočakávaným zlyhaniam, zlepšiť používateľskú skúsenosť a zefektívniť procesy ladenia a údržby. Od základných blokov `try-catch` po sofistikovanejší typ `Result` a vlastné chybové triedy, tieto vzory vám umožňujú vytvárať robustné aplikácie, ktoré dokážu odolať výzvam reálneho sveta. Prijatím týchto techník budete písať lepší kód v TypeScripte a poskytnete lepšiu skúsenosť vašim globálnym používateľom.

Nezabudnite si vybrať vzory spracovania chýb, ktoré najlepšie vyhovujú potrebám vášho projektu a zložitosti vašej aplikácie. Vždy sa zamerajte na poskytovanie jasných, informatívnych chybových hlásení a náhradných UI, ktoré používateľov prevedú akýmikoľvek potenciálnymi problémami. Dodržaním týchto pokynov môžete vytvoriť aplikácie, ktoré sú odolnejšie, udržiavateľnejšie a napokon úspešné na globálnom trhu.

Zvážte experimentovanie s týmito vzormi a technikami vo vašich projektoch a prispôsobte ich špecifickým požiadavkám vašej aplikácie. Tento prístup prispeje k lepšej kvalite kódu a pozitívnejšej skúsenosti pre všetkých používateľov.